var layerui = document.querySelector('.ui_layer'),
  btns = layerui.querySelectorAll('.layer_head_item'),
  main = layerui.querySelector('.ui_layer_main'),
  mask = layerui.querySelector('.ui_layer_mask'),
  icon = layerui.querySelector('.icon_tips_01'),
  list = layerui.querySelectorAll('.ui_layer_box_list'),
  time;
mask.addEventListener('click', function () {
  mask.style.cssText = 'display:none;opacity:0;'
  main.style.WebkitTransform = 'translateY(100%)'
  main.style.transform = 'translateY(100%)'
  clearTimeout(time)
  time = setTimeout(function () {
    layerui.style.display = 'none'
  }, 300)
}, false)


function init() {
  layerui.style.display = 'block'
  clearTimeout(time)
  time = setTimeout(function () {
    mask.style.cssText = 'display:block;opacity:.5;'
    main.style.WebkitTransform = 'translateY(0)'
    main.style.transform = 'translateY(0)'
  }, 100)
};

[].forEach.call(btns, function (ele, index, arr) {
  ele.addEventListener('click', function () {
    [].forEach.call(btns, function (ele, index, arr) {
      ele.classList.remove('active')
      list[index].classList.remove('active')
    })
    this.classList.add('active')
    list[index].classList.add('active')
    if (index === 0) {
      icon.style.left = '25%'
    } else {
      icon.style.left = '75%'
    }

  }, false);

});
